<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改配置界面</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="jquery/jquery.min.js" type="text/javascript"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="jquery/jquery.form.js" type="text/javascript"></script>
    <style>
        .panel {
            text-align: center;
            margin: 30px auto 0 auto;
            width: 1000px;
            background-color: rgb(233, 250, 255);
        }

        .panel-heading {
            background-color: rgb(195, 223, 234);
        }

        .panel-body {
            border-style: solid;
            border-width: 1px;
            border-color: rgb(180, 210, 220);
            border-top-style: none;
            text-align: center;
            margin: 0 auto;
            display: none;
        }

        .table {
            width: 850px;
            margin-left: 50px;
        }

        .photo {
            width: 150px;
            height: 150px;
        }

        .upload {
            width: 100px;
            height: 150px;
        }

        .name {
            width: 200px;
            height: 75px;
        }

        .price {
            width: 100px;
            height: 75px;
        }

        .operation {
            width: 250px;
            height: 75px;
        }

        input {
            border-style: none;
        }

        input:disabled {
            background-color: rgb(233, 250, 255);
        }

        .btn {
            margin: 0 10px;
        }

        td, th {
            vertical-align: middle !important;
            text-align: center;
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
		
		.navbar-header{
			min-width: 310px;
			color: white;
		}
		.navbar-header,.nav{
    		display: inline-block;
		}

		.nav-pills {
  		    height: 36px;
 		    padding-left: 60px;
		}

		.navbar-brand img {
  		    width: 50px;
  		    height: 30px;
    		vertical-align: middle;
    		display: inline;
		}
		.navbar-header span {
		    display: inline-block;
		    height: 60px;
		    line-height: 60px;
		    font-size: 18px;
		}

		.nav>li > a {
		    height: 60px;
		    line-height: 42px;
		    color: #fff;
		    border-radius: 0;
		}

		.nav-pills > li.active > a {
		    color: #53c5ff;
		    background: #30383e;
		}

		.nav > li > a:focus, .nav > li > a:hover {
		    color: #53c5ff;
		    background: #30383e;
		}

    </style>


</head>
<body style="background-image: url(images/bgmoon1.jpg); background-size: 100%;background-attachment: fixed; background-repeat: no-repeat;">
	 <div style="width: 100%; min-width:1000px;height:60px;background-color: #30383e;">
           <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img src="images/head-logo.png">
            </a>
            <span>D-Server人工智能服务器</span>
        </div>
        <div style="display: inline; width: 400px;">
        <ul class="nav nav-pills">
            <li role="presentation"><a href="http://ds.cstor.cn/#/dServer">人工智能服务器 </a></li>
            <li role="presentation"><a href="oders.html" style="color:#53c5ff">后台管理系统</a></li>

        </ul>
        </div>
        </div>
<div style="text-align: center;width: 1100px; min-height:750px; margin: 0 auto; border-style: solid;border-width: initial;border-color: rgb(136,198,229);background-color: rgba(255,255,255,0.6);margin-top: 30px;">
			<div style="background-color:rgb(225,236,237);width: 100%;height: 50px;">
				<p style="text-align: center;line-height: 50px; font-size: large;font-family: '微软雅黑';">配置管理</p>
			</div>
    <div id="list">

    </div>
</div>

</body>
<script>
    var c;         //原始数据
    var b;         //小类id
    var a;         //大类id
    //-------------------查询数据--------------------
    $.ajax({
        async: false,
        crossDomain: true,
        dataType: "json",
        url: "http://61.147.166.206:8963/gpumall/Configure/listAllConfig",
        method: "get",
        success: function (response) {
            c = response;
            a = c.data[0].child.split(",");//a数组存大类id
        },
    });

    //------------------修改按钮函数-----------------
    function mod(id) {
        $(id).parent().parent().find("input").removeAttr("disabled");
        $(id).parent().find("button").first().css('display', 'none');
        $(id).parent().find("button").eq(1).css('display', '');
    }

    //------------------保存按钮函数------------------
    function save(id) {
        var sss = {
            id: $(id).parent().find("input").val(),
            name: $(id).parent().parent().find("input").first().val(),
            price: $(id).parent().parent().find("input").eq(1).val()

        }
        $.ajax({
            async: false,
            crossDomain: true,
            dataType: "json",
            url: "http://61.147.166.206:8963/gpumall/Configure/updateConfig",
            method: "post",
            data: sss,
            success: function (msg) {
                alert("保存成功");
                $(id).parent().parent().find("input").attr("disabled", true);
                $(id).parent().find("button").first().css('display', '');
                $(id).parent().find("button").eq(1).css('display', 'none');
            },
        });
    }

    //------------------删除按钮函数------------------
    function deleted(id) {
        var a = $(id).parent().find("input").val();
        var sss = {
            pid: c.data[a].pid,
            configId: $(id).parent().find("input").val(),
        }
        if (confirm("你确定删除吗？")) {
            $.ajax({
                async: false,
                crossDomain: true,
                dataType: "json",
                url: "http://61.147.166.206:8963/gpumall/Configure/deleteConfigOfSecond",
                method: "post",
                data: sss,
                success: function (msg) {
                    alert("删除成功");
                    location.reload(true);
                }
            });
        }
    }


    //-----------------新增一项按钮函数----------------
    function add(id) {
        $(id).parent().before('<table class="table table-bordered"><tr><th rowspan="2" class="photo"></th><th class="name">名称</th><th class="price">价格</th><th class="operation">操作</th></tr><tr><td><input value="新配置"></input></td><td><input style="width: 50px;" value="0"></input></td><td><button class="btn btn-success" onclick="adddd(this)">添加新配置</button><button class="btn btn-danger" onclick="deleteadd(this)">删除</button></td></tr></table>');
    }

    //----------------添加新配置按钮函数-----------------
    function adddd(id) {
        console.log($(id).parent().parent().parent().parent().parent().parent().find("input").first().val());
        var sss = {
            pid: $(id).parent().parent().parent().parent().parent().parent().find("input").first().val(),
            name: $(id).parent().parent().find("input").first().val(),
            price: $(id).parent().parent().find("input").eq(1).val(),
            count: 1
        }
        $.ajax({
            async: false,
            crossDomain: true,
            dataType: "json",
            url: "http://61.147.166.206:8963/gpumall/Configure/addConfigOfSecond",
            method: "post",
            data: sss,
            success: function (msg) {
                alert("新增成功");
                location.reload(true);
            }
        });
    }

    //-----------------删除新增table------------------
    function deleteadd(id) {
        $(id).parent().parent().parent().parent().remove();
    }

    //-----------------取消按钮函数-------------------
    function recover(id) {
        var a = $(id).parent().find("input").val();
        $(id).parent().parent().find("input").first().val(c.data[a].name);
        $(id).parent().parent().find("input").eq(1).val(c.data[a].price);
        $(id).parent().find("button").first().css('display', '');
        $(id).parent().find("button").eq(1).css('display', 'none');
        $(id).parent().parent().find("input").attr("disabled", true);
    }

    //-----------------上传图片显示名字函数---------------
    function showname(id) {
        $(id).parent().parent().parent().find("input").first().val($(id)[0].files[0].name);
    }

    function sub(id) {
        // jquery 表单提交  

        $('#' + id).ajaxSubmit(function (message) {

            alert(JSON.stringify(message));
            // 对于表单提交成功后处理，message为返回内容
        });

        return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转   
    }

    $(document).ready(function () {

//------------------遍历展示数据---------------------

        for (var i = 0; i < a.length; i++) {
            b = [];//清空数组
            b = c.data[a[i]].child.split(",");//b数组存小类id


            $('#list').append('<div class="panel"><input style="display: none;" value="' + a[i] + '"></input><div class="panel-heading" id="ban_h' + i + '">'
                + c.data[a[i]].name +
                '</div><div class="panel-body" id="ban_b' + i + '"></div>');//大类名称

            for (var j = 0; j < b.length; j++) {

                $('#ban_b' + i).append('<table class="table table-bordered"><tr><th rowspan="2" class="photo"><img style="width: 100%;height: 100%;" src="http://61.147.166.206:8963/gpumall/Configure/image/download?fileName='
                    + c.data[b[j]].imgPath +
                    '"></th><th rowspan="2" class="upload"><input style="width: 80px;" value="未选择" disabled></input><form id="formdata_' + b[j] + '" enctype="multipart/form-data" action="http://61.147.166.206:8963/gpumall/Configure/image/upload" method="post" onsubmit="return sub(this.id);"><a class="file">选择文件<input onchange="showname(this)" name="file" type="file"/><input type="number" name="configId" style="display: none;" value="'
                    + parseInt(b[j]) +
                    '"></input></a><button type="submit" class="file">上传图片</button></form></th><th class="name">名称</th><th class="price">价格</th><th class="operation">操作</th></tr><tr><td><input value="'
                    + c.data[b[j]].name +
                    '" disabled></input></td><td><input style="width: 50px;" value="'
                    + c.data[b[j]].price +
                    '" disabled></input></td><td><input style="display: none;" value="'
                    + b[j] +
                    '"></input><button class="btn btn-info" onclick="mod(this)">修改</button><button style="display: none;" class="btn btn-warning" onclick="recover(this)">取消</button><button class="btn btn-success" onclick="save(this)">保存</button><button class="btn btn-danger" onclick="deleted(this)">删除</button></td></tr></table>');
            }

            $('#ban_b' + i).append('<div><button class="btn btn-block btn-primary" style="width: 780px;text-align: center;margin:5px auto;" onclick="add(this)">新增一项</button></div></div>');

        }
//-----------------控制各大类面板收放-------------------
        $("#ban_h0").click(function () {
            $("#ban_b0").slideToggle("slow");
        });
        $("#ban_h1").click(function () {
            $("#ban_b1").slideToggle("slow");
        });
        $("#ban_h2").click(function () {
            $("#ban_b2").slideToggle("slow");
        });
        $("#ban_h3").click(function () {
            $("#ban_b3").slideToggle("slow");
        });
        $("#ban_h4").click(function () {
            $("#ban_b4").slideToggle("slow");
        });
        $("#ban_h5").click(function () {
            $("#ban_b5").slideToggle("slow");
        });
        $("#ban_h6").click(function () {
            $("#ban_b6").slideToggle("slow");
        });
        $("#ban_h7").click(function () {
            $("#ban_b7").slideToggle("slow");
        });


    });
</script>
</html>
